import { Component } from 'react'
import { View, Text, Image, Button, Navigator } from '@tarojs/components'
import { AtFloatLayout } from 'taro-ui'

import withPage from 'src/utils/withPage'

import './index.scss'

type IProps = {}

type IState = {
  loadedImage: boolean
  showRuleDetail: boolean
}

interface Index {
  props: IProps
  state: IState
}

@withPage()
class Index extends Component {
  state: IState = {
    loadedImage: false,
    showRuleDetail: false,
  }

  handleLoadImage = () => {
    this.setState({ loadedImage: true })
  }

  handleShowRuleDetail = () => {
    this.setState({ showRuleDetail: !this.state.showRuleDetail })
  }

  render() {
    const { loadedImage, showRuleDetail } = this.state
    return (
      <View className="invite">
        <Image
          className="image"
          src="//image.tocj1314.com/046558e5860f45abb0e8836b56a932b7.png"
          mode="widthFix"
          onLoad={this.handleLoadImage}
        ></Image>
        {loadedImage && (
          <View className="rule" v-if="showBtn">
            <View className="tex" onClick={this.handleShowRuleDetail}>
              规则详情<View className="at-icon at-icon-chevron-right"></View>
            </View>
          </View>
        )}
        <Image
          className="image"
          src="//image.tocj1314.com/28698872aeeb4788b3189f666cb8c1a8.png"
          mode="widthFix"
          onLoad={this.handleLoadImage}
        ></Image>
        {loadedImage && (
          <View className="btns at-row at-row__justify--around">
            <Navigator
              className="down"
              url="/pages/users/user_spread_code/index"
              hover-className="none"
            >
              下载邀请海报
            </Navigator>
            <Button className="invite remove-button-style" open-type="share">
              立即邀请
            </Button>
          </View>
        )}
        <AtFloatLayout
          className="attr-box"
          title="规则详情"
          isOpened={showRuleDetail}
          onClose={this.handleShowRuleDetail}
        >
          <View className="describe">
            1、当您的好友通过您的邀请链接进入小程序商城，第一次下单12包精力羹，且线下完成付款，您将获得108元现金奖励；第一次下单600包精力羹，且线下完成付款，您将获得5400元现金奖励。
            <Text>
              您可获需以上奖励的前提要求是，您必须是健康行者或健康辅导师,才可获得以上好友首购奖励。
            </Text>
            您的奖励将在当月月底30号或31号由客服统计好，于第二个月5个工作口内发放，若您有疑问，请联系客服。
          </View>
          <View className="describe">
            2、您的好友复购精力羹，您可获得直接复购奖励2元/包，间接复购奖励1元/包，直接复购奖励是指您直接推荐的好友复购；间接复购奖励是指您直接推荐的好友又直接推荐了他的好友。
            他直接推荐的好友复购，您可得间接复购奖励。如：您推荐A购买了精力羹，A又推荐了B购买了精力羹，则A复购精力羹您可获得2元/包的直接复购奖励，B复购精力羹您可获得1元/
            包的间接复购奖励。
            <Text>
              您可获得以上奖励的前提要求是，您当月必须自己复购12包，才可获得以上好友复购奖励.
            </Text>
            您的奖励将在当月月底30号或31号由客服统计好，于第二个月5个工作日内发放，若您有疑问，请联系客服。
          </View>
        </AtFloatLayout>
      </View>
    )
  }
}

export default Index
